<template>
<div class="recommend" ref="recommend">
 <scroll ref="scroll" class="recommend-content">
     <ul class="clearFix">
         <li  v-for="item in list" :class="'u-cover col'+item.id" @click="description(item)">
             <div class="grid-content bg-purple">
                 <div class="icon">
                     <img width="240px" height="240px" :title="item.description"  :src="item['coverImgUrl']">
                     <div class="bottom">
                         <a href="javascript:void(0)" class="icon-play"></a>
                         <span class="icon-headset"></span>
                         <span class="nb">{{item['commentCount']}}</span>
                     </div>
                 </div>
                <!-- <a href="javascript:void(0)" :title="item.description" class="msk"></a>-->
                 <p>{{item['name']}}</p>
              </div>
         </li>
     </ul>
 </scroll>
</div>
</template>
<script>
    import Scroll from '../../base/scroll/scroll'
    export default{
        components:{
            Scroll
            },
            data(){
                return{
                    list:{}
                }
            },
        created(){
            this._getMusic()
        },
        methods:{
            _getMusic(){
                let target = this;
               target.fetch({
                   url:'/top/playlist',
                   method:'GET',
                   params:{
                       limit:10,
                       order:'hot'
                   }
               }).then(function (response) {
                  target.list = response.data.playlists; 
               });
            },
            description(item){

            }
        }
    }

</script>
<style scoped>
    ul li{
     float: left;
        list-style: none;
        margin: 10px;
        position: relative;
        padding-left: 42px;
    }
    .icon{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .col{
        overflow: hidden;
    }
    .u-cover .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 27px;
        background-position: 0 -537px;
        color: #ccc;
        background-color: #05050566;
    }
    .u-cover .msk {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .bg-purple{
        display: inline-block;
        max-width: 100%;
        _width: 100%;
        vertical-align: middle;

    }
</style>